<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令实例属性</title>
</head>
<body>
<div id="demo" v-demo:hello.a.b="msg">

</div>
<div id="demo2" v-demo1.literal="foo bar baz">
    <my-directive v-bind:bind><span>元素指令</span></my-directive>
    <div v-example v-bind:a="some value"></div>
</div>
<script src="../js/libs/vue.js"></script>
<script>
    Vue.directive('demo', {
        bind: function () {
            console.log('demo bound!');
        },
        update: function (value) {
            this.el.innerHTML =
                    'name - ' + this.name +  '<br/>' +
                    'expression - ' + this.expression + '<br/>' +
                    'argument - ' + this.argument + '<br/>' +
                    'modifiers - ' + JSON.stringify(this.modifiers) + '<br/>' +
                    'value - ' + value
        }
    });
    //字面修饰符
    Vue.directive('demo1', function (value) {
        console.log(value);
    });
    //元素指令
    Vue.elementDirective('my-directive', {
        bind: function () {
            console.log('123');
        }
    });
    Vue.directive('example', {
        params: ['a'],
        paramWatchers: {
            a: function (val, oldVal) {
                console.log('a changed');
            }
        }
    });
    var demo = new Vue({
        el: '#demo',
        data: {
            msg: 'hello'
        }
    });
    var demo2 = new Vue({
        el: '#demo2'
    });
</script>
</body>
</html>